<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>小米商城</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <style type="text/css">
        #box{
            width:990px;
            height:458px;
            border:1px solid black;
            position:relative;
            overflow:hidden;
        }
        #red{
            background-image: url("/image/lunbo/01.jpg");
            width:990px;
        }
        #green{
            background-image: url("/image/lunbo/02.jpg");
            width:990px;
        }
        #blue{
            background-image: url("/image/lunbo/03.jpg");
            width:990px;
        }
        #black{
            background-image: url("/image/lunbo/04.jpg/");
            width:990px;
        }
        .slide{
            width:990px;
            height:460px;
            position:absolute;
        }
    </style>
    <script type="text/javascript">
        onload=function(){
            var arr = document.getElementsByClassName("slide");
            for(var i=0;i<arr.length;i++){
                arr[i].style.left = i*990+"px";
            }
        }
        function LeftMove(){
            var arr = document.getElementsByClassName("slide");//获取三个子div
            for(var i=0;i<arr.length;i++){
                var left = parseFloat(arr[i].style.left);
                left-=15;
                var width = 990;//图片的宽度
                if(left<=-width){
                    left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾

                    clearInterval(moveId);
                }
                arr[i].style.left = left+"px";

            }
        }
        function divInterval(){
            moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
        }


        timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。

        function stop(){
            clearInterval(timeId);
        }
        function start(){
            clearInterval(timeId);
            timeId=setInterval(divInterval,3000);
        }

        //页面失去焦点停止
        onblur = function(){
            stop();
        }
        //页面获取焦点时开始
        onfocus = function(){
            start();
        }
    </script>
</head>
<body>
<!-- start header -->
<header>
    <div class="top center">
        <div class="left fl">
            <ul>
                <li><a href="/buyer/index" target="_blank">小米商城</a></li>
                <li>|</li>
                <li><a href="">MIUI</a></li>
                <li>|</li>
                <li><a href="">米聊</a></li>
                <li>|</li>
                <li><a href="">游戏</a></li>
                <li>|</li>
                <li><a href="">多看阅读</a></li>
                <li>|</li>
                <li><a href="">云服务</a></li>
                <li>|</li>
                <li><a href="">金融</a></li>
                <li>|</li>
                <li><a href="">小米商城移动版</a></li>
                <li>|</li>
                <li><a href="">问题反馈</a></li>
                <li>|</li>
                <li><a href="">Select Region</a></li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="right fr">
            <div class="gouwuche fr"><a href="/buyer/car/1">购物车</a></div>
            <div class="fr">
                <ul>
                    <li><c:if test="${loginInfo!=null}"><a href="/buyer/selfInfo">欢迎${loginInfo.loginName}</a></c:if><c:if test="${loginInfo eq null}"><a href="/login.jsp">登录</a></c:if></li>
                    <li>|</li>
                    <li><c:if test="${loginInfo!=null}"><a href="/logout">注销</a></c:if><c:if test="${loginInfo eq null}"><a href="/register">注册</a></c:if></li>
                    <li>|</li>
                    <li><a href="">消息通知</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a href="/buyer/index" target="_blank">
        <div class="logo fl"></div>
    </a>
    <a href="">
        <div class="ad_top fl"></div>
    </a>
    <div class="nav fl">
        <ul>
            <li><a href="/buyer/list" target="_blank">小米手机</a></li>
            <li><a href="">红米</a></li>
            <li><a href="">平板·笔记本</a></li>
            <li><a href="">电视</a></li>
            <li><a href="">盒子·影音</a></li>
            <li><a href="">路由器</a></li>
            <li><a href="">智能硬件</a></li>
            <li><a href="">服务</a></li>
            <li><a href="">社区</a></li>
        </ul>
    </div>
    <div class="search fr">
        <form action="" method="post">
            <div class="text fl">
                <input type="text" class="shuru" placeholder="小米6&nbsp;小米MIX现货">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<!-- end banner_x -->

<!-- start banner_y -->
<div class="banner_y center">
    <div class="nav" style="float: left;">
        <ul>
            <c:forEach items="${productCategoryList}" var="level1">
                <li>
                    ${level1.name}
                    <div class="pop">
                        <div class="left fl">
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/xm6_80.png" alt=""></div>
                                        <span class="fl">小米6</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/5c_80.png" alt=""></div>
                                        <span class="fl">小米手机5c</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/xmNOTE2-80.jpg" alt=""></div>
                                        <span class="fl">小米Note 2</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/MIX-80.jpg" alt=""></div>
                                        <span class="fl">小米MIX</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/MIX-80.jpg" alt=""></div>
                                        <span class="fl">小米5s</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/xm5Splus.jpg" alt=""></div>
                                        <span class="fl">小米5s Plus</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                        </div>
                        <div class="ctn fl">
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/xm5-80.jpg" alt=""></div>
                                        <span class="fl">小米手机5</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/hmn4x80.png" alt=""></div>
                                        <span class="fl">红米Note 4X</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/hmnote4-80.jpg" alt=""></div>
                                        <span class="fl">红米Note-4</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/hm4x_80.png" alt=""></div>
                                        <span class="fl">红米4x</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/hm4-80.jpg" alt=""></div>
                                        <span class="fl">红米4</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                            <div>
                                <div class="xuangou_left fl">
                                    <a href="">
                                        <div class="img fl"><img src="/image/hm4A-80.jpg" alt=""></div>
                                        <span class="fl">红米4A</span>
                                        <div class="clear"></div>
                                    </a>
                                </div>
                                <div class="xuangou_right fr"><a href="">选购</a></div>
                                <div class="clear"></div>
                            </div>
                        </div>

                        <div class="clear"></div>
                    </div>
                </li>
            </c:forEach>

        </ul>
    </div>
    <div id="box" onmouseover="stop()" onmouseout="start()" style="position: relative;z-index: 1">
        <div id="red" class="slide"></div>
        <div id="green" class="slide"></div>
        <div id="blue" class="slide"></div>
        <div id="black" class="slide"></div>
    </div>
</div>

<div class="sub_banner center">
    <div class="sidebar fl">
        <div class="fl"><a href=""><img src="/image/hjh_01.gif"></a></div>
        <div class="fl"><a href=""><img src="/image/hjh_02.gif"></a></div>
        <div class="fl"><a href=""><img src="/image/hjh_03.gif"></a></div>
        <div class="fl"><a href=""><img src="/image/hjh_04.gif"></a></div>
        <div class="fl"><a href=""><img src="/image/hjh_05.gif"></a></div>
        <div class="fl"><a href=""><img src="/image/hjh_06.gif"></a></div>
        <div class="clear"></div>
    </div>
    <div class="datu fl"><a href=""><img src="/image/hongmi4x.png" alt=""></a></div>
    <div class="datu fl"><a href=""><img src="/image/xiaomi5.jpg" alt=""></a></div>
    <div class="datu fr"><a href=""><img src="/image/pinghengche.jpg" alt=""></a></div>
    <div class="clear"></div>


</div>
<!-- end banner -->
<div class="tlinks">Collect from <a href="http://www.cssmoban.com/">企业网站模板</a></div>

<!-- start danpin -->
<div class="danpin center">

    <div class="biaoti center"><a href="/buyer/list">小米明星单品</a></div>
    <div class="main center">
        <c:forEach items="#{productList}" var="list" begin="1" end="5">
            <div class="mingxing fl">
                <div class="sub_mingxing"><a href="/buyer/productDetail/${list.id}"><img src="/image/${list.fileImg}" alt=""></a></div>
                <div class="pinpai"><a href="">${list.name}</a></div>
                <div class="youhui">${list.description}</div>
                <div class="jiage">${list.price}</div>
            </div>
        </c:forEach>



            <div class="clear"></div>
    </div>
</div>
<div class="peijian w">
    <div class="biaoti center">配件</div>
    <div class="main center">
        <div class="content">
            <div class="remen fl"><a href=""><img src="/image/peijian1.jpg"></a>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span>新品</span></div>
                <div class="tu"><a href=""><img src="/image/peijian2.jpg"></a></div>
                <div class="miaoshu"><a href="">小米6 硅胶保护套</a></div>
                <div class="jiage">49元</div>
                <div class="pingjia">372人评价</div>
                <div class="piao">
                    <a href="">
                        <span>发货速度很快！很配小米6！</span>
                        <span>来至于mi狼牙的评价</span>
                    </a>
                </div>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:#fff"></span></div>
                <div class="tu"><a href=""><img src="/image/peijian3.jpg"></a></div>
                <div class="miaoshu"><a href="">小米手机4c 小米4c 智能</a></div>
                <div class="jiage">29元</div>
                <div class="pingjia">372人评价</div>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:red">享6折</span></div>
                <div class="tu"><a href=""><img src="/image/peijian4.jpg"></a></div>
                <div class="miaoshu"><a href="">红米NOTE 4X 红米note4X</a></div>
                <div class="jiage">19元</div>
                <div class="pingjia">372人评价</div>
                <div class="piao">
                    <a href="">
                        <span>发货速度很快！很配小米6！</span>
                        <span>来至于mi狼牙的评价</span>
                    </a>
                </div>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:#fff"></span></div>
                <div class="tu"><a href=""><img src="/image/peijian5.jpg"></a></div>
                <div class="miaoshu"><a href="">小米支架式自拍杆</a></div>
                <div class="jiage">89元</div>
                <div class="pingjia">372人评价</div>
                <div class="piao">
                    <a href="">
                        <span>发货速度很快！很配小米6！</span>
                        <span>来至于mi狼牙的评价</span>
                    </a>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="content">
            <div class="remen fl"><a href=""><img src="/image/peijian6.png"></a>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:#fff"></span></div>
                <div class="tu"><a href=""><img src="/image/peijian7.jpg"></a></div>
                <div class="miaoshu"><a href="">小米指环支架</a></div>
                <div class="jiage">19元</div>
                <div class="pingjia">372人评价</div>
                <div class="piao">
                    <a href="">
                        <span>发货速度很快！很配小米6！</span>
                        <span>来至于mi狼牙的评价</span>
                    </a>
                </div>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:#fff"></span></div>
                <div class="tu"><a href=""><img src="/image/peijian8.jpg"></a></div>
                <div class="miaoshu"><a href="">米家随身风扇</a></div>
                <div class="jiage">19.9元</div>
                <div class="pingjia">372人评价</div>
            </div>
            <div class="remen fl">
                <div class="xinpin"><span style="background:#fff"></span></div>
                <div class="tu"><a href=""><img src="/image/peijian9.jpg"></a></div>
                <div class="miaoshu"><a href="">红米4X 高透软胶保护套</a></div>
                <div class="jiage">59元</div>
                <div class="pingjia">775人评价</div>
            </div>
            <div class="remenlast fr">
                <div class="hongmi"><a href=""><img src="/image/hongmin4.png" alt=""></a></div>
                <div class="liulangengduo"><a href=""><img src="/image/liulangengduo.png" alt=""></a></div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<footer class="mt20 center">
    <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
    <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>
    <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
</footer>
</body>
</html>